{% extends 'layout.html' %}
{% block css %}
    <link rel="stylesheet" href="/static/ztree/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
    <style>
        .redstar::before {
            content: '*';
            color: red;
        }

    </style>
{% endblock %}

{% block content %}

    <section id="main-content">
        <div class="row">
            <div class="col-lg-12">


                <div class="card">
                    <div class="">
                        <button type="button" class="btn btn-primary btn-flat btn-addon m-b-10 m-l-5"
                                data-target="#apicaseaddForm" data-toggle="modal"><i
                                class="ti-plus"></i>新建测试用例

                        </button>
                        <div class="col-md-3" style="float: right;top:-8px">
                            <form action="{% url 'apitests:api_case_auto' %}" method="get">
                                <div class="input-group">

                                    <input type="text" id="search_text" name="Search" class="form-control"
                                           placeholder="Search Round" style="border-radius:20px"
                                           value="{{ search_text }}">
                                    <span class="input-group-btn">
                                    <button class="btn btn-primary btn-group-right search_btn"
                                            type="submit"><i
                                            class="ti-search"></i></button></span>
                                </div>
                            </form>
                        </div>
                    </div>
                    {#列表#}
                    <div class="card-body">
                        <div class="table-responsive" style="text-align: center;">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>用例名称</th>
                                    <th>优先级</th>
                                    <th>创建人</th>
                                    <th style="text-align: center">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for api_auto in obj_list.object_list %}
                                    <tr>
                                        <input type="hidden" value="{{ api_auto.id }}" id="api_auto_id">
                                        <td id="api_auto_name">{{ api_auto.name }}</td>
                                        <td id="api_auto_priority">{{ api_auto.get_priority_display }}</td>
                                        <td id="api_auto_creator">{{ api_auto.creator }}</td>
                                        <td style="text-align: center">
                                            <a class="btn btn-info m-b-10 m-l-5"
                                               onclick="api_run_case({{ api_auto.id }})"
                                            >执行</a>
                                            <a class="btn btn-info m-b-10 m-l-5"
                                               onclick="api_auto_edit({{ api_auto.id }}) "
                                            >详细</a>
                                            <a class="btn btn-info m-b-10 m-l-5"
                                               onclick="api_auto_copy({{ api_auto.id }}) "
                                            >复制</a>
                                            <span class="btn btn-dark m-b-10 m-l-5"
                                                  onclick="api_auto_del({{ api_auto.id }})">删除</span>

                                        </td>
                                    </tr>
                                {% endfor %}


                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>
            </div>

        </div>
        <div class="modal fade" id="apicaseaddForm" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalFormTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalFormTitle">添加测试用例</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="api_case_name" class="redstar">用例名称</label>
                                <input type="text" class="form-control" id="add_api_case_name" name="api_case_name"
                                       placeholder="请输入用例名称">
                            </div>

                            <div class="form-group">
                                <label for="api_case_priority" class="redstar">优先级</label>
                                <select id="add_api_case_priority" class="form-control" name="api_case_priority">

                                    <option value="0">P0</option>
                                    <option value="1">P1</option>
                                    <option value="2" selected>P2</option>
                                    <option value="3">P3</option>

                                </select>
                            </div>
                            <div class="form-group">
                                <label for="api_case_describe">说明</label>
                                <textarea class="form-control" id="add_api_case_describe" name="api_case_describe"
                                          style="height: 100px"
                                          placeholder="请输入说明"></textarea>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger btn-pill" data-dismiss="modal">Close
                                </button>
                                <button type="button" class="btn btn-danger btn api_auto_add">
                                    Save Changes
                                </button>
                            </div>
                        </form>
                    </div>


                </div>
            </div>
        </div>
        <div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             data-backdrop='static'>
            <div class="modal-dialog" role="document">
                <div class="card-body ">
                    <div class="container" style="font-size: 30px;color: pink;text-align: center;">执行中请等待！</div>
                    <div class="container" style="font-size: 20px;color: pink;text-align: center;">
                        <div class="spinner-grow text-muted"></div>
                        <div class="spinner-grow text-primary"></div>
                        <div class="spinner-grow text-success"></div>
                        <div class="spinner-grow text-info"></div>
                        <div class="spinner-grow text-warning"></div>
                        <div class="spinner-grow text-danger"></div>
                        <div class="spinner-grow text-secondary"></div>
                        <div class="spinner-grow text-dark"></div>
                        <div class="spinner-grow text-light"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
{% block paginate %}
    <div class="dataTables_paginate paging_simple_numbers" id="expendable-data-table_paginate">
        <ul class="pagination">

            {% if  obj_list.has_previous %}
                <li class="paginate_button page-item previous "
                    id="expendable-data-table_previous">
                    <a href="?{{ obj_list.previous_page_number.querystring }}"
                       aria-controls="expendable-data-table"
                       data-dt-idx="0" tabindex="0"
                       class="page-link">上一页</a>
                </li>
            {% else %}
                <li class="paginate_button page-item disabled "
                    id="expendable-data-table_previous">
                    <a href="?{{ obj_list.previous_page_number.querystring }}"
                       aria-controls="expendable-data-table"
                       data-dt-idx="0" tabindex="0"
                       class="page-link">上一页</a>
                </li>
            {% endif %}
            {% for page in obj_list.pages %}
                {% if page %}
                    {% ifequal page obj_list.number %}
                        <li class="paginate_button page-item active"><a
                                href="?{{ page.querystring }}"
                                aria-controls="expendable-data-table"
                                data-dt-idx="1" tabindex="0"
                                class="page-link">{{ page }}</a></li>
                    {% else %}
                        <li class="paginate_button page-item "><a href="?{{ page.querystring }}"
                                                                  aria-controls="expendable-data-table"
                                                                  data-dt-idx="2" tabindex="0"
                                                                  class="page-link">{{ page }}</a>
                        </li>
                    {% endifequal %}
                {% else %}
                    <li class="page-item"><a href="" class="page-link">...</a></li>
                {% endif %}
            {% endfor %}

            {% if obj_list.has_next %}
                <li class="paginate_button page-item next" id="expendable-data-table_next">
                    <a href="?{{ obj_list.next_page_number.querystring }}"
                       aria-controls="expendable-data-table"
                       data-dt-idx="4" tabindex="0" class="page-link">下一页</a>
                </li>
            {% else %}
                <li class="paginate_button page-item disabled" id="expendable-data-table_next">
                    <a href="?{{ obj_list.next_page_number.querystring }}"
                       aria-controls="expendable-data-table"
                       data-dt-idx="4" tabindex="0" class="page-link">下一页</a>
                </li>
            {% endif %}

        </ul>
    </div>
{% endblock %}
{% block js %}
    <script>
        function api_run_case(api_auto_id) {
            $('#loading').modal('show')
            console.log(api_auto_id)
            $.ajax({
                url: "{% url "apitests:api_case_run" %}",
                type: "POST",
                data: {
                    "api_auto_id": api_auto_id,
                },
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status) {
                        $('#loading').modal('hide')
                        swal({
                            title: "执行完成，准备自动跳转",
                            timer: 1500,
                            showConfirmButton: false,
                        });
                        var timer = setTimeout(() => {
                            {#window.open("{% url "apitests:case_show_report" %}" + "?url=" + data.url)#}
                            window.open("{% url "apitests:report_show" %}" + "?report_id=" + data.report_id)
                            clearTimeout(timer)
                        }, 1000)
                    } else {
                        var timer = setTimeout(() => {
                            $('#loading').modal('hide');
                            clearTimeout(timer)
                        }, 1000)
                        swal({
                            title: data.error_msg,
                            timer: 1500,
                            showConfirmButton: false,
                        });
                    }

                }
            })
        }
    </script>
    <script>
        function api_auto_edit(api_auto_id) {
            var project_id = $('#project_text').val()
            window.location.href = '{% url "apitests:api_auto_edit" %}' + '?project_id=' + project_id + '&api_auto_id=' + api_auto_id
        }
    </script>
{#    复制#}
    <script>
        function api_auto_copy(api_auto_id) {
            swal(
                {
                    title: "您确定要复制吗？",
                    type: "info",
                    showCancelButton: true,
                    confirmButtonColor: "green",
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    closeOnConfirm: false,
                    closeOnCancel: false,
                },
                function (isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: "{% url 'apitests:api_auto_copy' %}",
                            type: "POST",
                            data: {"api_auto_id": api_auto_id},
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                            },
                            success: function (data) {
                                if (data.status) {
                                    swal({
                                        title: '复制成功',
                                        timer: 1000,
                                        showConfirmButton: false,
                                    });
                                    var timer = setTimeout(() => {
                                        window.location.reload();
                                        clearTimeout(timer)
                                    }, 1000)
                                }
                            }
                        })

                    } else {
                        swal({
                            title: "",
                            timer: 0.5,
                            showConfirmButton: false,
                        });
                    }
                }
            );
        }

    </script>
    <script>
        document.querySelector('.api_auto_add').onclick = function () {
            var api_case_name = $('#add_api_case_name').val()
            var api_case_priority = $('#add_api_case_priority').val()
            var api_case_describe = $('#add_api_case_describe').val()
            var api_project = $('#project_text').val()
            console.log(api_case_name, api_case_priority, api_case_describe)
            if (api_case_name) {
                $.ajax({
                    url: "{% url "apitests:api_auto_add" %}",
                    type: "POST",
                    data: {
                        "api_case_name": api_case_name,
                        "api_case_priority": api_case_priority,
                        "api_case_describe": api_case_describe,
                        "api_project": api_project,
                    },
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success: function (data) {
                        if (data.status) {
                            swal({
                                title: "添加成功",
                                timer: 1000,
                                showConfirmButton: false,
                            });
                            var timer = setTimeout(() => {
                                window.location.reload();
                                clearTimeout(timer)
                            }, 1000)
                        } else {
                            swal({
                                title: "数据有误",
                                timer: 1000,
                                showConfirmButton: false,
                            });
                        }

                    }
                })
            } else {
                swal({
                    title: "请输入用例名称",
                    timer: 1000,
                    showConfirmButton: false,
                });
            }

        }
    </script>
    {#删除#}
    <script>
        function api_auto_del(api_auto_id) {
            swal(
                {
                    title: "Are you sure to delete ?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it !!",
                    cancelButtonText: "No, cancel it !!",
                    closeOnConfirm: false,
                    closeOnCancel: false,
                },
                function (isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: "{% url 'apitests:api_auto_del' %}",
                            type: "POST",
                            data: {"api_auto_id": api_auto_id},
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                            },
                            success: function (data) {
                                if (data.status) {
                                    swal({
                                        title: '删除成功',
                                        timer: 1000,
                                        showConfirmButton: false,
                                    });
                                    var timer = setTimeout(() => {
                                        window.location.reload();
                                        clearTimeout(timer)
                                    }, 1000)
                                }
                            }
                        })

                    } else {
                        swal({
                            title: "Sweet auto close alert !!",
                            timer: 0.5,
                            showConfirmButton: false,
                        });
                    }
                }
            );
        }

    </script>
    <script>
        function project_change() {
            $('#project_change_form').submit()
        }
    </script>
{% endblock %}